<template>
  <div class="detail-header-wrapper">
    <!-- 这个是header消失后才出现的 -->
    <router-link tag="div" to="/" class="header-back" v-show="!showHeader">
      <span class="iconfont icon-back">&#xe624;</span>
    </router-link>   
    <div class="header" v-show="showHeader" :style="opacityStyle">
      <router-link tag="div" to="/" class="header-left" >
        <span class="iconfont icon-back">&#xe624;</span>
      </router-link>
      <h3 class="header-title">
        成都欢乐谷
      </h3>
      
    </div>   

  </div>
  
</template>

<script>

export default {
  name: 'DetailHeader',
  data: function() {
    return {
      showHeader: false,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  activated: function() {
    window.addEventListener('scroll', this.handleScroll);
  },
  deactivated: function() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll: function() {
      var top = document.documentElement.scrollTop;
      if (top > 50) {
        this.showHeader = true;
        
        var opacity = top / 100;
        this.opacityStyle.opacity = opacity > 1 ? 1 : opacity
        
      } else {
        this.showHeader = false;
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@styles/variables.styl';

  .header-back {
    position: absolute;
    z-index: 2;
    top: .1rem;
    left: .2rem;
    width: .8rem;
    height: .8rem;
    background-color: rgba(0, 0, 0, .6);
    border-radius: .4rem;
    line-height: .8rem;
    text-align: center;

    .icon-back {
      color: #fff;
    }
  }

  // ????不知道为什么这么写
  .header {
    position: fixed;
    z-index: 3;
    top: 0;
    bottom: 0;
    // top0和bottom0一起设置, 如果没有设置高度的话, 它会铺满整个屏幕(因为父级定位只有html了..)
    // 如果设置了height,那么按照height的来, 所以其实bottom可以不设置, 为了对比,还是设置好了
    left: 0;
    right: 0;
    height: $headerHt;
    background-color: $bgColor;
    line-height: $headerHt;
    color: #fff;
    
    .header-left {
      position: absolute;
      left: 0;
      // display: inline-block;
      width: 1rem;
      height: $headerHt;
      color: #fff;
      line-height: $headerHt;
      text-align: center;
      
    }

    .header-title {
      text-align: center;
      font-size: .4rem;
    }
    
  }


</style>